<template>
    <div>
        <!-- 头部 -->
        <header>
            <div class='header'>
                <div class='header-logo'>
                    <div class="left-header"><h1>逛逛民宿</h1></div>
                    <div class="right-header">
                        <router-link to="/login" class="login" v-if="this.userIds == null">立马登录</router-link>
                        <div class='listed' v-if="this.userIds != null">
                            <router-link to="/personal" class='user-up'>{{this.userName}}</router-link>
                            <button  class='extra-entry' @click='loginOut'>退出</button>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- 民宿的图片展示+ -->
        <div class='product-gallery'>
            <div class="gallery-cover">
                <div class="first">
                    <div class="pro-img">
                        <img src="../assets/ld/img/hotel1.jpg" alt="" class='hotel'>
                        <div class='imgShadow'></div>
                    </div>
                </div>
                <div class="rest">
                    <div class='item' v-for="(stay1,index) in stay" :key="index">
                        <img :src="stay1.img" alt="图片">
                        <div class='imgshadow'></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 房源位置 -->
        <div class="location">
            <div class="location-detail">
                <h3>房源位置<span class='en'>LOCATION</span>
                </h3>
                <div class="order-map" id="dituContent">

                </div>
            </div>
        </div>

        <!-- 预定须知 -->
        <div class='J-bookNotice'>
            <div class="all-react">
                <div class='bookHotel'>
                    <h3>预定须知<span class='en'>NOTICE</span></h3>
                </div>
                <div class="react1">
                    <div class="l-react1">                    
                        <div class="des-notice">
                            <ul>
                                <li>
                                    <header>退款</header>
                                    <main>
                                        <div class="notice-main">
                                            <div class="notice-main__first">
                                                <strong>极速退款</strong>
                                                <div class="notice-main__desc">15分钟内免费取消</div>
                                            </div>
                                            <div class="notice-main__extra">
                                                房东已为您提供预定成功后15分钟内免费取消权益。（该权益不受房源退订规则限制）
                                            </div>
                                        </div>
                                    </main>
                                </li>
                                <li>
                                    <header>退订</header>
                                    <main>
                                        <div class="notice-main">
                                            <div class="notice-main__first">
                                                <div class="base-tag green-filled small">
                                                    <span class="tag-content">宽松</span>
                                                </div>
                                                <div class="notice-main__desc">
                                                    入住前1天12:00前退订，可获100%退款。之后退订不退款</div>
                                                </div>
                                                <div class="notice-main__extra">
                                                    <div class="cancel-rule-chart">
                                                        <div class="cancel-step cancel-step--green">
                                                            <ul class="cancel-step__list"><li><div><strong>现在预订</strong></div></li></ul>
                                                            <div class="cancel-step__block">
                                                                <div><strong>取消免费退</strong></div>
                                                                <div class="mt-1"><span class="pc-10px">取消订单可退还100%房费</span></div>
                                                            </div>
                                                        </div>
                                                        <div class="cancel-step cancel-step--red">
                                                            <ul class="cancel-step__list">
                                                                <li>
                                                                    <div><strong>入住前1天</strong></div>
                                                                    <div class="mt-1"><span class="pc-10px">12:00前</span></div>
                                                                </li>
                                                                <li>
                                                                    <div><strong>入住当天</strong></div>
                                                                    <div class="mt-1"><span class="pc-10px">12:00前</span></div>
                                                                </li>
                                                                <li>
                                                                    <div><strong>离店</strong></div>
                                                                    <div class="mt-1"><span class="pc-10px">12:00后</span></div>
                                                                </li>
                                                            </ul>
                                                            <div class="cancel-step__block">
                                                                <div><strong>取消不可退</strong></div>
                                                                <div class="mt-1">
                                                                    <span class="pc-10px">取消订单/提前离店扣除未住房费的100%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </main>
                                    </li>
                                    <li>
                                        <header>开票</header>
                                        <main>
                                            <div class="notice-main">
                                                <div class="notice-main__first">
                                                    <strong>平台开票</strong>
                                                    <div class="notice-main__desc">
                                                        <span>房东委托平台开具发票。<a target="_blank" rel="noreferrer noopener" class="zg-link" href="https://i.meituan.com/awp/hfe/block/12d0f3588c59/81718/index.html">查看开票说明</a></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </main>
                                    </li>
                                </ul>
                            <footer>以上规则由商家规定，请仔细阅读并遵守</footer>
                        </div>
                    </div>
                    <div class="r-react1">
                        <div class="aside">
                            <div class="booking-wrap">
                                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                    <el-form-item label="入离时间" prop="pass" style="margin-top:10px;margin-bottom:18px">
                                        <el-input type="text" v-model="ruleForm.pass" autocomplete="off" style="width:100%"></el-input>
                                    </el-form-item>                             
                                    <el-form-item label="几位" prop="age" style="margin-bottom:18px">
                                        <el-input v-model.number="ruleForm.age"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('ruleForm')" style="padding:10px 15px">提交</el-button>
                                        <el-button @click="resetForm('ruleForm')" style="padding:10px 15px">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>          
        </div>
        <Footer/>
    </div>
</template>
<script>
import Footer from '../components/ld/footer.vue'
import cookie from '../cookie/index'
import jwtDecode from 'jwt-decode'
export default {
    name:'HomeStay',
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {  
                    callback(); 
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入入离时间'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        return {
             stay:[
                {img:require('../assets/ld/img/hotel2.jpg')},
                {img:require('../assets/ld/img/hotel4.jpg')},
                {img:require('../assets/ld/img/hotel3.jpg')},
                {img:require('../assets/ld/img/hotel5.jpg')},
            ],
            ruleForm: {
                pass: '',
                age: ''
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],               
                age: [
                    { validator: checkAge, trigger: 'blur' }
                ]
            },
            userIds:null,
            userName:null
        }
    },
    mounted(){
        this.initMap();
        this.userIds = jwtDecode(cookie.getToken()).userId;
        this.userName = jwtDecode(cookie.getToken()).userNickname
    },
    methods:{
        //    退出登录
        loginOut(){
            this.$confirm('是否确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url:'/shops/login_and_register/basic/logout',
                    method:'POST',
                    headers:{
                        'Authorization':cookie.getToken()
                    }
                }).then(data => {
                    if(data.data.code === 200){
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        });
                        this.$router.push({ name:'login' })
                        cookie.removeToken()
                    }
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });          
            });
        },
         initMap(){
            this.createMap();//创建地图
		    this.setMapEvent();//设置地图事件
		    this.addMapControl();//向地图添加控件
        },
        // 创建函数地图
        createMap(){
            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
		    var point = new BMap.Point(112.21,34.40);//定义一个中心点坐标
		    map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
		    window.map = map;//将map变量存储在全局
        },

        //地图时间创建函数
        setMapEvent(){
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		    map.enableKeyboard();//启用键盘上下左右键移动地图
        },

        //地图控件添加函数
        addMapControl(){
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
            map.addControl(ctrl_nav);
                //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
            map.addControl(ctrl_ove);
                //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            map.addControl(ctrl_sca);
        },
    },
    components:{
        Footer
    }
  
}
</script>
<style lang="less" scoped>
*{
    padding:0;
    margin: 0;
}
// 头部
    .header{
        margin: 0 auto;
        height: 70px;
        line-height: 70px;
        .header-logo{
            width: 94%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .left-header{
                width: 142px;
                height: 70px;
            }
            .right-header{
                .login{
                    text-decoration: none;
                    color: #585858;
                }
                .listed{
                    margin-left: 15px;
                    a{
                        text-decoration: none;
                        font-size: 14px; 
                        cursor: pointer;
                    }
                    .user-up{
                        color:#007bff;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                    .extra-entry{
                        color: #666;
                        outline: none;
                        border: none;
                        cursor: pointer;
                        background: transparent;
                    }
                }
            }
        }
    }
    // 展示图片的地方
    .product-gallery{
        padding-top: 8px;
        position: relative;
        width: 98%;
        margin: 0 auto;        
        .gallery-cover{
            display: flex;
            align-items: flex-start;
            margin: -4px;
            .first{
                flex: 1;
                position: relative;
                overflow: hidden;
                .pro-img{
                    height: 56vh;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                       
                    }
                     &:hover img{
                        transition: transform .5s ease-out;
                        cursor: pointer;
                        transform:scale(1.2);
                        overflow: hidden;
                    }
                     .imgShadow{
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0,0,0,.1);
                        position: absolute;
                        top: 0;
                        cursor: pointer;    
                    }
                }               
               
            }
            .rest{
                margin-left:15px;
                flex: 1;
                display: grid;
                height: 56vh;
                grid-template-columns: 49% 49% ;
                grid-template-rows: 49% 49%;
                position: relative;
                .imgshadow{
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,.1);
                    position: absolute;
                    top: 0;
                    cursor: pointer;
                }
                .item:nth-child(1){
                    margin: 0 10px 15px 0;
                }
                .item:nth-child(3){
                    margin-right:10px ;
                }
                .item:nth-child(2){
                    margin-bottom: 15px;
                }
                .item{
                    position: relative;
                    overflow: hidden;
                    &:hover img{
                        transition: transform .5s ease-out;
                        cursor: pointer;
                        transform:scale(1.2);
                        overflow: hidden;
                    }
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    // 房源位置
    .location{
        margin-top: 10px;
        width: 100%;
        .location-detail{
            // width: 1260px;
            position: relative;
            padding: 16px;
            // max-width: 1180px;
            margin: 0 auto;
            h3{
                position: relative;
                font-size: 24px;
                color: #252626;
                padding: 0;
                margin-bottom: 12px;
                margin-top: 40px;
                .en{
                    position: absolute;
                    top: 0;
                    font-size: 10px;
                    color: #d0d4d7;
                    font-weight: 500;
                    font-style: italic;
                    margin-left: 4px;
                    // text-transform: uppercase;
                }
            }
            .order-map{
                width: 100%;
                height: 400px;
            }
        }
    }
    // 预定须知
    .J-bookNotice{
        margin-top: 15px;
        position: relative;
        width: 100%;
        .all-react{
            position: relative;
            margin: 0 auto;
            padding-left: 26px;
              h3{
                    position: relative;
                    font-size: 24px;
                    color: #252626;
                    padding: 0;
                    margin-bottom: 12px;
                    margin-top: 40px;
                    .en{
                        position: absolute;
                        top: 0;
                        font-size: 10px;
                        color: #d0d4d7;
                        font-weight: 500;
                        font-style: italic;
                        margin-left: 4px;
                        // text-transform: uppercase;
                    }
                }
        }
        .react1{
            position: relative;
            padding: 16px;
            display: flex;
            justify-content: space-around;
            .l-react1{
              
                .des-notice{
                    padding: 0 8px;
                    font-size: 12px;
                    background: #fff;
                    border-top: 1px solid transparent;
                    ul{
                       
                        padding: 0 0 16px;
                        list-style: none;
                        li{
                             margin-top: 20px;
                            display: flex;
                            header{
                                color: #7d7e80;
                                width: 24px;
                                margin-right: 20px;
                                line-height: 14px;
                                white-space: nowrap;
                            }
                            main{
                                flex: 1 0 0;
                                min-width: 0;
                                .notice-main__first{
                                    display: flex;
                                    align-items: center;
                                    line-height: 14px;
                                    .base-tag.green-filled {
                                        color: #fff;
                                    }
                                    .base-tag.small {
                                        padding: 2px;
                                    }
                                    .base-tag {
                                        position: relative;
                                        display: inline-flex;
                                        flex-shrink: 0;
                                        max-width: 100%;
                                    }
                                    .tag-content{
                                        z-index: 1;
                                        line-height: 1;
                                        font-size: 12px;
                                    }
                                    .notice-main__desc {
                                        flex: 1 0 0;
                                        min-width: 0;
                                        margin-left: 4px;
                                    }
                                    .notice-main__extra{
                                        margin-top: 8px;
                                        line-height: 1.4;
                                    }
                                }
                            }
                        }
                    }
                    footer{
                        color: #c8cacc;
                        padding: 16px 0;
                        border-top: 1px solid #eff1f4;
                        line-height: 1;
                    }
                }
            }
            .r-react2{
                font-size: 18px;
            }
            
        }
    }
</style>